import React, {Component} from 'react'
import {View, Text, StyleSheet, TouchableOpacity, Dimensions, Image, ScrollView, Switch} from 'react-native'
import {GetSelectStudentsApi} from '../../config/api'
import Badge from '../common/badge'
import Icon from 'react-native-vector-icons/Ionicons'
import styles,{BLUE} from '../../config/styles'
var {height, width} = Dimensions.get('window')

//选择学生的组件
class StudentsSelector extends Component {
    static defaultProps = {
        classrooms: null,
        studentsSelect: (() => {}),
        selectedStudents: []
    }

    constructor (props) {
        super(props)
        this.state = {
            active_class_id: null,
            students: []
        }
    }


    getStudents = (classroom_id) => {
        this.setState({active_class_id: classroom_id})
        GetSelectStudentsApi(classroom_id).then((data) => {
            if (data.code == 0) {
                this.setState({
                    students: data.students
                })
            }
        })
    }

    //正在选择的班级
    activeClassroom = () => {
        return this.props.classrooms.filter((c) => {return c.id == this.state.active_class_id})[0]
    }

    //选择学生
    selectStudent = (student_id) => {
        const {selectedStudents, studentsSelect, classrooms} = this.props
        const activeClassroom = this.activeClassroom()
        if (activeClassroom.studentCount == undefined) activeClassroom.studentCount = 0
        //if (typeof(student) == 'number') {student_id = [student_id]}
        if (selectedStudents.find((x) => x == student_id)) {
            let _selectedStudents = selectedStudents.filter((s) => {
                return s != student_id
            })
            activeClassroom.studentCount -= 1
            studentsSelect(_selectedStudents)
        } else {
            selectedStudents.push(student_id)
            activeClassroom.studentCount += 1
            studentsSelect(selectedStudents)
        }
    }

    //判断是否已经全选了
    selectedAll = () => {
        const activeClassroom = this.activeClassroom()
        return activeClassroom.studentCount != undefined && activeClassroom.studentCount == this.state.students.length
    }

    //选择当前班级的所有学生
    selectAllStudent = () => {
        const {selectedStudents, studentsSelect} = this.props
        const activeClassroom = this.activeClassroom()
        let _selectedStudents = selectedStudents
        if (this.selectedAll()) {
            this.state.students.forEach((s) => {
                _selectedStudents = _selectedStudents.filter((x) => {
                    return x != s.id
                })
            })
            activeClassroom.studentCount = 0
        } else {
            if (activeClassroom.studentCount == undefined) activeClassroom.studentCount = 0
            activeClassroom.studentCount = this.state.students.length
            this.state.students.forEach((s) => {_selectedStudents.push(s.id)})
            _selectedStudents = Array.from(new Set(_selectedStudents))
        }
        studentsSelect(_selectedStudents)
    }

    render () {
        const {classrooms, selectedStudents} = this.props
        return(
            <ScrollView style={{flex: 1, margin: 5, backgroundColor: 'white'}}>
                <View style={styles.classroom_container}>
                    {classrooms.map((classroom, index) => {
                        let _backgroundColor = classroom.id == this.state.active_class_id ? BLUE  : '#f1f5f6'
                        let _textColor = classroom.id == this.state.active_class_id ? 'white' : 'black'
                        return(
                            <View style={{flexDirection: 'row'}} key={index}>
                                <TouchableOpacity
                                    style={[styles.classroom_select, {backgroundColor: _backgroundColor}]}
                                    onPress={() => this.getStudents(classroom.id)}
                                >
                                    <View style={{flex: 1}}>
                                        <Text style={{color: _textColor}}>{classroom.name}</Text>
                                    </View>
                                </TouchableOpacity>
                                {classroom.studentCount == undefined || classroom.studentCount == 0 ? 
                                    <View style={{width: 18}} /> : 
                                    <Badge text={classroom.studentCount || 0} offsetLeft={3} />
                                }
                            </View>
                        )
                    })}
                </View>
                {
                    this.state.students.length > 0 ? (
                        <View style={{flex: 1, flexDirection: 'row', padding: 15, alignItems: 'center'}}>
                            <Text style={{flex: 1}}>是否全选</Text>
                            <Switch
                                onValueChange={this.selectAllStudent}
                                style={{margin: 3}}
                                onTintColor={BLUE}
                                value={this.selectedAll()}
                            />
                        </View>
                    ) : null
                }
                <View style={{flexDirection: 'row', flexWrap: 'wrap', alignItems: 'center'}}>
                    {this.state.students.map((student, index) => {
                        const image = student.avatar == null ? (
                            student.sex == true ? require('../../assets/images/role-student-male.png') : require('../../assets/images/role-student-female.png')
                        ) : {uri: student.avatar}
                        return (
                            <TouchableOpacity
                                key={index} 
                                onPress={() => this.selectStudent(student.id)}
                            >
                                <Image source={image} style={[styles.image_wrap]} />
                                <View style={{alignItems: 'center', marginTop: 10}}>
                                    <Text>{student.name}</Text>
                                    <View style={{position: 'relative', top: -50, left: 25}}>
                                    {
                                        selectedStudents.find((x) => {return x == student.id}) ? (
                                            <Image source={require('../../assets/images/active.png')} style={{height: 25, width: 25}} />
                                        ) : <View style={{height: 25}}><Text>{''}</Text></View>
                                    }
                                    </View>
                                    
                                </View>
                            </TouchableOpacity>
                        )
                    })}
                </View>
            </ScrollView>
        )
    }

}

// const styles = StyleSheet.create({
//     classroom_select: {
//         justifyContent: 'center', 
//         alignItems: 'center', 
//         borderColor: '#5daeff', 
//         padding: 5,
//         //margin: 5,
//         borderRadius: 8, 
//         borderStyle: 'solid', 
//         borderWidth: 0.8,
//         width: width / 3 - 18,
//         flexDirection: 'row'
//     },

//     classroom_container: {
//         flexDirection: 'row', 
//         //flexWrap: 'wrap', 
//         width: width, 
//         flex: 1, 
//         padding: 10,
//         margin: 10,
//         alignItems: 'flex-start'
//     },

// })

export default StudentsSelector